<!-- 未使用 -->
<template>
  <div style="background: #F7F8F9">
    <div class="separation">
      <h1 v-show="article.difficulty===0" class="font-title-easy">{{ article.title }}</h1>
      <h1 v-show="article.difficulty===1" class="font-title-medium">{{ article.title }}</h1>
      <h1 v-show="article.difficulty===2" class="font-title-hard">{{ article.title }}</h1>
    </div>
    <div class="separation">
      <h2 class="font-summary">一一{{ article.summary }}</h2>
    </div>
    <div class="separation-gmt">
      <h2 class="font-gmtModified">一最后修改时间: {{ article.gmtModified }}</h2>
    </div>
    <div class="separation-context" v-highlight>
      <p v-html="article.content">{{ article.content }}</p>
    </div>
    <div class="separation-bottom">

    </div>
    <!--回到顶部-->
    <div>
      <template>
        <el-backtop></el-backtop>
      </template>
    </div>
  </div>
</template>

<script>
import articleApi from '@/api/article'

export default {

  data() {
    return {
      articleId: '',
      article: {
        title: '',
        summary: '',
        content: '',
        sort: 0,
        gmtModified: ''
      },
      viewNum: 0
    }
  },

  created() {
    if (this.$route.params && this.$route.params.id) {
      this.articleId = this.$route.params.id
    }
    //this.getArticleInfoById()
  },

  mounted() {
    this.getArticleInfoById()
    this.getViewNumOrAddViewNumById()
  },

  methods: {
    getArticleInfoById() {
      articleApi.getArticleInfoById(this.articleId)
        .then(response => {
          this.article = response.data.data.article
          console.log("===========获取文章===========")
          console.log(this.article)
        })
    },
    //增加获取并当前浏览数
    getViewNumOrAddViewNumById() {
      console.log("=====文章阅读数====")
      articleApi.getViewNumOrAddViewNumById(this.articleId,0)
        .then(response => {
          if (response.data.success === true) {
            this.article = response.data.data.article
            this.viewNum = response.data.data.article.viewNum
            this.viewNum = this.viewNum + 1
            articleApi.addRecord()
            articleApi.getViewNumOrAddViewNumById(this.articleId,1)
            this.$message({
              message: "您是该文章第" + this.viewNum + "位阅读者",
              type: "success"
            })
          }
        })
    }
  }
}

</script>

<style>
.font-title {
  font-family: "微软雅黑";
  text-align: center;
  font-size: 25px;
  padding-top: 30px;
  margin-bottom: 20px;
}
.font-title-easy {
  font-family: "微软雅黑";
  text-align: center;
  font-size: 25px;
  padding-top: 30px;
  margin-bottom: 20px;
  color: #00AF9B;
}
.font-title-medium {
  font-family: "微软雅黑";
  text-align: center;
  font-size: 25px;
  padding-top: 30px;
  margin-bottom: 20px;
  color: #FFB800;
}
.font-title-hard {
  font-family: "微软雅黑";
  text-align: center;
  font-size: 25px;
  padding-top: 30px;
  margin-bottom: 20px;
  color: #FF2D55;
}
.font-summary {
  color: #76839b;
  font-size: small;
  margin-left: 850px;
  margin-top: 20px;
  margin-bottom: 10px;
  line-height: 2em;
}
.font-gmtModified {
  color: #76839b;
  font-size: small;
  margin-left: 900px;
  margin-top: 20px;
  margin-bottom: 10px;
  line-height: 2em;
}
.font-content {
  font-size: large;
  margin-top: 50px;
  margin-left: 6%;
  margin-right: 6%;
}

.separation pre {
  margin-left: 12%;
  margin-right: 12%;
}

.separation p {
  font-size: large;
  color: #0c72f0;
}

.separation-context {
  margin-left: 10%;
  margin-right: 10%;
}
.separation-gmt {
  margin-left: 10%;
  margin-right: 10%;
}

.separation {
  border-bottom: 1px solid rgb(103, 197, 154);
  margin-left: 10%;
  margin-right: 10%;
}

.separation-bottom {
  margin-bottom: 50px;
}
</style>

